<template>
    <section 
    class="login" 
    >
        <div class="content">
            <h3 class="wow tada">
                获取会员福利，提升中标几率
            </h3>

            <my-form 
            v-if="!nickname"
            ref="form"
            class="form-logn"
            v-model="form"
            autocomplete="off" 
            label-width="0"
            inline
            @submit="submitHandler"
            size="medium"
            >
                <el-form-item 
                prop="mobile"
                :rules="newRule('手机号', 'required', 'mobile')"
                >
                    <el-input 
                        v-model="form.mobile" 
                        clearable 
                        autocomplete="off" 
                        :placeholder="`请输入手机号`"
                    ></el-input>
                </el-form-item>

                <el-form-item
                prop="yzm"
                :rules="newRule('验证码', 'required')"
                >
                    <el-input 
                        v-model="form.yzm" 
                        clearable 
                        autocomplete="off" 
                        :placeholder="`请输入验证码`"
                    ></el-input>
                </el-form-item>

                <el-form-item
                >
                    <btn-yzm
                        :mobile="form.mobile"
                    ></btn-yzm>
                </el-form-item>

                <template slot="btn" slot-scope="scope">
                    <span></span>
                </template>
            </my-form>

            <div v-if="nickname" class="nickname">
                {{nickname}}
            </div>

            <div class="btn-row">
                <el-button 
                type="primary" 
                class="btn-login wow tada" 
                @click="btnClickHandler"
                >
                    享受会员福利
                </el-button>
            </div>
        </div>
    </section>
</template>

<script>
import BtnYzm from '@components/sys/btn-yzm';

import { mapGetters } from 'vuex';

export default {
    components: {
        BtnYzm,
    },
    data() {
        return {
            form: {
                mobile: '',
                yzm: '',
            },
        }
    },
    computed: {
        ...mapGetters({
            nickname: 'userinfo/getNickname',
            viplevel: 'userinfo/getLevel',
        }),
    },
    methods: {
        btnClickHandler() {
            if (!this.nickname) {
                this.$refs.form.onSubmit();
                return;
            }

            if (!this.viplevel) {
                window.location.assign('/member');
            } else {
                window.location.assign('/user/application/business-inquiries');
            }
        },
        submitHandler() {
            this.$store.dispatch('userinfo/smsloginHandler', {
                data: this.form,
                success: () => {
                    this.btnClickHandler();
                },
            });
        },
    },
    mounted() {
        
    }
}
</script>

<style lang="scss" scoped>
    .login{
        background: #FFFDFC;
        padding: 50px 0;
        background: url(~@images/index/bg-login.jpg);
        background-size: cover;
        background-repeat: no-repeat;

        h3{
            text-align: center;
            font-size: 24px;
            color: #333;
            margin-bottom: 36px;
        }

        .form-logn{
            text-align: center;

            .yzm{
                ::v-deep{
                    .el-input-group__append{
                        margin-left: 16px;
                    }

                    .el-input__inner{
                        margin-right: 16px;
                    }
                }
            }
        }

        .nickname{
            text-align: center;
            font-size: 24px;
            font-weight: bold;
        }

        .btn-row{
            margin-top: 20px;
            text-align: center;
        }
    }
</style>